<template>
    <div>
        <el-button
                size="mini"
                @click="addOffice()">添加</el-button>
    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                prop="id"
                label="id"
                width="180">
        </el-table-column>
        <el-table-column
                prop="username"
                label="账号"
                width="180">
        </el-table-column>
        <el-table-column
                prop="password"
                label="密码">
        </el-table-column>
        <el-table-column
                prop="realname"
                label="昵称">
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="updateOffice(scope.row)">编辑</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="deleteOffice(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>

    </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    <el-dialog
            title="修改"
            :visible.sync="dialogVisible"
            width="30%"
           >
        <el-form ref="userForm" :model="userForm" label-width="80px">
            <el-form-item label="账号">
                <el-input v-model="userForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="userForm.password"></el-input>
            </el-form-item>
            <el-form-item label="昵称">
                <el-input v-model="userForm.realname"></el-input>
            </el-form-item>
        </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmUpdate">确 定</el-button>
            </span>
    </el-dialog>
        <el-dialog
                title="添加"
                :visible.sync="dialogVisible01"
                width="30%"
        >
            <el-form ref="userForm" :model="userForm" label-width="80px">
                <el-form-item label="账号">
                    <el-input v-model="userForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="userForm.password"></el-input>
                </el-form-item>
                <el-form-item label="昵称">
                    <el-input v-model="userForm.realname"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible01 = false">取 消</el-button>
                <el-button type="primary" @click="confirmadd">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>


<script>
    export default {
        name: "User",
        data(){
            return{
                currentPage:1,
                pageSize:5,
                total:0,
                tableData:[],
                dialogVisible:false,
                dialogVisible01:false,
                userForm:{},
            }
        },
        created(){
            this.initTable();
        },
        methods:{
            handleSizeChange(val) {
                this.pageSize=val;
                this.initTable();
            },
            handleCurrentChange(val) {
                this.currentPage=val;
                this.initTable();
            },
            confirmadd(){
                this.$http.post("http://localhost:8888/user/add",this.userForm).then(result=>{
                    this.$message.success("添加成功");
                    this.initTable();
                })
                this.userForm={}
                this.dialogVisible01=false
            },
            addOffice(){
                this.dialogVisible01=true;
            },
            confirmUpdate(){
                this.$http.post("http://localhost:8888/user/update",this.userForm).then(result=>{
                    this.$message.success("修改成功");
                    this.initTable();
                })
                this.dialogVisible=false
            },
            updateOffice(row){
                 this.dialogVisible=true;
                 this.userForm=row;
            },
            initTable(){
             this.$http.get("http://localhost:8888/user/select?currentPage="+this.currentPage+"&pageSize="+this.pageSize).then(result=>{
                 this.tableData=result.data.data.list;
                  this.total=result.data.data.total;
             })
            },
            deleteOffice(id){
                this.$http.post("http://localhost:8888/user/delete?id="+id).then(result=>{
                    this.$message.success("删除成功");
                    this.initTable();
                })
            }
        }
    }
</script>

<style scoped>

</style>